<template>
  <div>
    <el-container>
      <el-header>
        <div class="cart_nav">
          <span @click="back" class="iconfont icon-fanhui"></span>
        </div>
        <div class="cart_tab">
          <span>购物车</span>
        </div>
      </el-header>
      <el-main>
        <div class="cart_good_card" v-for="(item,index) in cart" :key="index">
          <input class="good_checkbox"
          @click="onClick(item)"
          :checked="item.checked"
           type="checkbox" />
          <div class="card_container">
            <img :src="item.img" alt />
            <div class="card_wrapper">
              <p class="card_title">
                <b>{{item.title}}</b>
                <span @click="del(index)">×</span>
              </p>
              <p class="card_dtitle">{{item.content}}</p>
              <p class="card_price">
                ￥{{item.price}}
                <van-stepper @change="onChange" v-model="item.num" />
              </p>
            </div>
          </div>
        </div>
      </el-main>
      <el-footer>
        <div class="cart_footer">
          <span>
            <input class="good_allbox" :checked="selAll"  @click="onAllClick" type="checkbox" />全选
          </span>
          <p class="footer">
            <span>数量：{{totalnum}}</span>
            <span>总价：{{totalprice}}</span>
          </p>
          <span class="btn">去结算</span>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  computed: {
    cart: function() {
      return this.$store.state.cart;
    },
    totalnum: function() {
      return this.$store.state.totalnum;
    },
    totalprice: function() {
      return this.$store.state.totalprice;
    },
    selAll: function() {
      return this.$store.state.allCheckbox;
    }
  },
  mounted() {
    // 刷新后保存选中后的价格
      this.$store.state.totalnum = 0;
      this.$store.state.totalprice = 0;
      this.$store.state.cart.map(ele => {
        if (ele.checked == true) {
          this.$store.state.totalnum += ele.num;
          this.$store.state.totalprice += ele.num * ele.price;
        }
      })
  },
  methods: {
    back() {
      window.history.back();
    },
    //点击商品前面得复选框  单选
    onClick(item) {
      this.$store.dispatch("onClick", {
        id: item.id,
        checked: event.target.checked
      });
    },
    //点击全选
    onAllClick() {
      this.$store.dispatch("onAllClick", event.target.checked);
    },
    //商品加减变化
    onChange() {
      this.$store.dispatch("onChange");
    },
    //删除
    del(index) {
      this.$store.dispatch("del", index);
    }
  }
};
</script>

<style scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  /* border: 1px solid red; */
}
.el-header {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.cart_nav {
  width: 5%;
}
.cart_tab {
  width: 85%;
  font-size: 22px;
}

.cart_good_card {
  width: 100%;
  /* border: 1px solid red; */
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 10px;
  box-sizing: border-box;
  padding: 0.1rem;
  background-color: #fff;
}
.card_container {
  width: 97%;
  /* border: 1px solid red; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cart_good_card img {
  width: 120px;
  margin: 5px 5px;
  border: 1px solid lightgrey;
}
.good_checkbox {
  zoom: 200%;
  margin-left: 5px;
}
.card_wrapper {
  width: 88%;
  box-sizing: border-box;
}
.card_title {
  width: 100%;
  font-size: 18px;
  /* border: 1px solid red; */
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 2px 20px;
  align-items: center;
}
.card_dtitle {
  box-sizing: border-box;
  padding: 2px 20px;
  color: grey;
}
.card_title span {
  font-size: 30px;
}
.card_price {
  font-size: 20px;
  font-weight: 550;
  color: red;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 2px 20px;
  align-items: center;
  margin-top: 5px;
  margin-bottom: 10px;
}
.cart_footer {
  width: 100%;
  height: 60px;
  /* border: 1px solid red; */
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.good_allbox {
  zoom: 200%;
}
.btn {
  width: 80px;
  height: 30px;
  border-radius: 30px;
  border: 1px solid red;
  text-align: center;
  line-height: 30px;
}
</style>